<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>透析助手</title>
        <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <meta name="format-detection" content="telephone=no">
        <link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.5.6/css/sm.min.css">
        <link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.5.6/css/sm-extend.min.css">
        <link rel="stylesheet" href="__PUBLIC__/css/swiper.css">
        <link rel="stylesheet" href="__PUBLIC__/css/style.css">
        <link rel="stylesheet" href="__PUBLIC__/css/5s.css">
        <link rel="stylesheet" href="__PUBLIC__/css/6m.css">
        <link rel="stylesheet" href="__PUBLIC__/css/iconfont.css">
        <script type='text/javascript' src='__PUBLIC__/js/jquery-1.11.1.min.js' charset='utf-8'></script>
        <script type='text/javascript' src='__PUBLIC__/js/myjq.js' charset='utf-8'></script>
        <script type='text/javascript' src='__PUBLIC__/js/swiper.min.js' charset='utf-8'></script>
        <script type='text/javascript' src='__PUBLIC__/js/socket.js'></script>
        <style>
            .AjaxMore{z-index:1;position:absolute;width:100%;text-align: center;color:rgba(0,0,0,0.4);height:40px;line-height:40px;overflow:hidden;}
            .AjaxMore span{display: inline-block;height:100%;vertical-align: middle;font-size:0.8rem;}
            .AjaxMore img{vertical-align: middle;height:25px;}
            .divADBox{position:absolute;left:0;right:0;background:#f5f5f5;min-height: 100%;z-index:100;padding-bottom:60px; }
        </style>
    </head>
    <body>
        <div class="head head-another" style="box-shadow: 0 3px 5px #E6E6E6;">
            <div class="HeadContent">
                <a href="javascript:void(0);" class="backIndex" onclick="location.href=document.referrer"><i class="iconfont">&#xe605;</i></a>
                <a href="javascript:void(0);" class="HeadTitle"><{:I('get.name')}></a>
            </div>
        </div>
        <div id="page" data_value="1" class="AjaxMore">
            <img src="__PUBLIC__/images/loading1.gif"/>
            <span>请稍等，正在为您加载。。</span>
        </div>
        <div class="divADBox" id="divADBox1">
            <div id="list" class="PublicContent" style="box-shadow: none;"><include file="list" /></div>
        </div>
        <div class="ChartText">
            <div class="ChartText-input"><input id="message" name="message" type="text" /></div>
            <a id="send_btn" href="javascript:void(0);" class="ChartText-submit">发送</a>
        </div>
        <script>
            if('<{:I("get.seeHistory")}>' == '1'){//查看历史记录
                $('.ChartText').hide();
            }else{
                //判断积分是否充足
                $.post('<{:U("Home/Score/checkScore")}>',{sender:'<{$sender}>'},function(res){
                    if(res == 'no'){
                        alert('积分不足，无法发起提问');
                        history.go(-1);
                    }
                },'json');
            }
            
            var move = function (e) {
                e.preventDefault && e.preventDefault();
                e.returnValue = false;
                e.stopPropagation && e.stopPropagation();
                return false;
            }
            //取消禁止滚动
            function remliste() {
                window.removeEventListener('touchmove', move);
            }
            //禁止滚动
            function addliste() {
                window.addEventListener('touchmove', move);
            }
            //addliste();
            var startX, startY, endX, endY, ychangge, stop1;
            document.getElementById("divADBox1").addEventListener("touchstart", touchStart, false);
            document.getElementById("divADBox1").addEventListener("touchmove", touchMove, false);
            document.getElementById("divADBox1").addEventListener("touchend", touchEnd, false);
            function touchStart(event) {
                //alert(1)
                clearTimeout(stop1);
                var touch = event.touches[0];
                startY = touch.pageY;
                startX = touch.pageX;
            }
            function touchMove(event) {
                // alert(1)
                var touch = event.touches[0];
                endY = touch.pageY;
                endX = touch.pageX;
                if (endY - startY <= 0 || $(window).scrollTop() > 0) {
                    return false
                } else {

                    addliste();
                    ychangge = 0.5 * (endY - startY);
                    $("#divADBox1").css("transform", "translate3d(0," + ychangge + "px,0)");
                }

            }
            function touchEnd(event) {
                remliste();
                if (endY - startY <= 0 || $(window).scrollTop() > 0) {
                    return false
                } else {
                    $("#divADBox1").css("transform", "translate3d(0," + 40 + "px,0)");
                    stop1 = setTimeout('$("#divADBox1").css({"transform":"translate3d(0,0,0)"});', 1000);
                    $.ajax({
                        method: "POST",
                        url: "<{:U('user')}>",
                        data: {p: $("#page").attr('data_value') * 1 + 1, sender: '<{$sender}>', receiver: '<{$receiver}>'}
                    }).done(function (html) {
                        if (html != '') {
                            $("#page").attr('data_value', $("#page").attr('data_value') * 1 + 1);
                            $("#list").prepend(html);
                        }
                    });
                }
            }

            function send(text) {
                Server.send('message', JSON.stringify({sender: '<{$sender}>', receiver: '<{$receiver}>', text: text}));
            }
            
            var hasChat = 0;//是否发起会话
            
            $(function () {
                $('#send_btn').click(function (e) {
                    if ($("#message").val()) {
                    
                        //发起一次会话，患者扣除5积分
                        if(hasChat == 0){
                            hasChat = 1;
                            $.post('<{:U("Home/Score/addChat")}>',{sender:'<{$sender}>',receiver:'<{$receiver}>'});
                        }
                    
                        $("#list").append('<div class="ChartContent ChartRight"><i class="iconfont">&#xe613;</i>' + $("#message").val() + '</div>');
                        send($("#message").val());
                        h = $(document).height() - $(window).height();
                        $("html,body").animate({scrollTop: h}, 200);
                        $("#message").val('');
                    }
                });

                Server = new FancyWebSocket('ws://' + window.location.host + ':8000');
                Server.bind('open', function () {
                    send();
                });

                Server.bind('message', function (data) {
                    $("#list").append('<div class="ChartContent ChartLeft"><i class="iconfont">&#xe613;</i>' + data + '</div>');
                    h = $(document).height() - $(window).height();
                    $("html,body").animate({scrollTop: h}, 200);
                });
                Server.connect();
            });
        </script>
    </body>
</html>